<template>
    <div>
      <section id="teams" class="section teams">
        <div class="container">
          <div class="section-header">
            <h2 class="wow fadeInDown animated">我们的团队</h2>
            <p class="wow fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa <br> semper aliquam quis mattis quam.</p>
          </div>
          <div class="row">
            <div v-for="(trainMan, index) in trainManList" :key="index" class="col-md-3 col-sm-6">
              <div class="person"><img :src="trainMan.photo" alt="" class="img-responsive">
                <div class="person-content">
                  <h4>{{trainMan.name}}</h4>
                  <h5 class="role">Founder</h5>
                  <p>{{trainMan.workExperience}}</p>
                </div>
                <ul class="social-icons clearfix">
                  <li><a @click="addStar(trainMan)"><span class="fa fa-hand-o-up"></span></a></li>
                  <li><a @click="subStar(trainMan)"><span class="fa fa-thumbs-down"></span></a></li>
                  <li><a @click="enterResume(trainMan)"><span class="fa fa-eye"></span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

    </div>
</template>

<script>
  import {queryHighStarTrainMan, updateTrainMan} from '@/business/api/trainMan'
  import {queryOssById} from '@/api/system/oss'
  import resume from './resume'
  export default {
    name: 'index',
    data: function() {
      return {
        trainManList: [],
        showResume: false,
        choiceTrainMan: null
      }
    },
    computed: {

    },
    components: {
      resume
    },
    mounted() {
      this.getList()
    },
    methods: {
      enterResume(trainMan) {
        // 设置当前正在查看的教练信息
        this.$store.commit('app/SET_TRAIN_MAN_INFO', trainMan)
        this.$router.push('../train_man/resume')
      },
      async getList() {
        await queryHighStarTrainMan(100).then(response => {
          if (response.code === 200) {
            this.trainManList = response.data;
          }
        })
        for (let i = 0; i < this.trainManList.length; i++) {
          let trainMan = this.trainManList[i];
          await queryOssById(trainMan.photo).then(response => {
            if (response.code === 200) {
              trainMan.photo = response.data.url;
            }
          })
        }
      },
      async imgUrl(ossId) {
        let url = null;
        await queryOssById(ossId).then(response => {
          if (response.code === 200) {
            url = response.data.url;
          }
        })
        return url;
      },
      addStar(trainMan) {
        trainMan.star++;
        // trainMan.photo = null;
        updateTrainMan(trainMan).then(response => {
          if (response.code === 200) {
            this.$message.success('助力成功')
          }
        })
      },
      subStar(trainMan) {
        trainMan.star--;
        // trainMan.photo = null;
        updateTrainMan(trainMan).then(response => {
          if (response.code === 200) {
            this.$message.warning('感谢您的指正')
          }
        })
      }
    }
  }
</script>

<style scoped src="../../../../assets/css/main.css">


  img {
    border-radius: 10px;
  }

</style>
